<template>
    <div class="content">
        <el-dialog :visible.sync="importList.dialogFormVisible" title="批量导入学生" size="tiny" :before-close="handleClose">
          <el-form ref="form" :model="form" label-width="130px">
            <el-form-item label="请选择导入的学生">
              <el-row :gutter="20" type="flex" class="row-bg" justify="space-between">
                <el-col :span="24">
                  <span class="urlText" v-cloak>
                    <el-row type="flex" class="row-bg" justify="space-between">
                      <el-col :span="6">
                        <el-button type="text" class="text">{{form.text}}</el-button>
                      </el-col>
                      <el-col :span="6">
                        <el-button v-if="delStart" @click="delUrl" type="text">
                          <span v-if="!loading">删除<i class="el-icon-close el-icon--right"></i></span>
                          
                        </el-button>
                      </el-col>
                    </el-row>
                    <i v-if="expand" :style="`width:${progress}%`" class="expand"></i>
                  </span>
                </el-col>
                <el-col :span="6">
                  <file-upload ref="upload" @onSuccess="successFn" :file-list.sync="fileOptions.fileList" @getFileName="getFileName"  @onProgress="progressFn" :up-file-type="fileOptions.upFileType">
                    <el-button type="text" class="btn-success font-style-color" slot="trigger" size="small">选择文件</el-button>
                  </file-upload>
                </el-col>
              </el-row>
              <div class="el-upload-text font-style-color">只能上传xlsx/xls文件，学生姓名、家长联系电话必填 <br>建议每次导入的学生数量不超过100人</div>
            </el-form-item>
            
            <div v-if="percentage == 100">
              <div v-if="delStart">
                <el-form-item label="校验结果：">
                  <p>数据无误，可上传！</p>
                </el-form-item>
              </div>
            </div>
            <div v-else>
              <div v-if="delStart">
                <el-form-item label="校验结果：">
                  <span class="title">数据校验中</span>
                    <el-row :gutter="20">
                      <el-col :span="20">
                        <el-progress :percentage="percentage"></el-progress>
                      </el-col>
                    </el-row>
                    <el-row :gutter="20">
                      <el-col :span="20">
                        <p class="el-upload-text font-style-color">{{errorIng}}</p>
                      </el-col>
                    </el-row>
              </el-form-item>
              </div>
            </div>
            <div v-if="upError && !delStart">
                <el-form-item label="错误信息：">
                    <el-row :gutter="20">
                      <el-col :span="20">
                        <p>{{errorIng}}</p>
                      </el-col>
                    </el-row>
                </el-form-item>
            </div>
              <el-form-item label="">
                <el-row :gutter="20">
                  <el-col :span="20">
                    <span class="font-style-color">
                      <a href="https://testdoc-1254059237.cos.ap-shanghai.myqcloud.com/批量导入学生模板.xlsx" download="文件样式参考范本.xlsx">文件样式参考范本下载</a>
                    </span>
                  </el-col>
                </el-row>
              </el-form-item>
            <el-row type="flex" class="row-bg" justify="center">
              <el-col :span="4">
                <el-button @click="close">关闭</el-button>
              </el-col>
              <el-col :span="4">
                <el-button :disabled="percentage !== 100" :loading="loading" type="primary" @click="btnUp">上传</el-button>
              </el-col>
            </el-row>
          </el-form>
        </el-dialog>
    </div>
</template>
<script>
import fileUpload from "components/Upload/fileUpload";
import { importStudent,verifyStudentForImport } from "api/classAll";
export default {
  name:"importBatch",
  props: {
    importList: {
      type: Object,
      required: true
    }
  },
  created() {
    // 获取班级id
  },
  data() {
    return {
      //设置上传类型
      fileOptions: {
        upFileType: 'excel',
        fileList:[]
      },

      //初始加载进度
      progress: 0,

      //展示上传文件名称
      form: {
        text: ""
      },

      //判断是否选择文件
      delStart: false,

      //是否进度条滚动
      expand: false,

      //上传loading
      loading: false,
      percentage:0,
      timout:null,
      errorIng:'',
      upError:false
    };
  },
  components: {
    fileUpload
  },
  methods: {
    //
    progressFn(p) {
      this.progress = p.percent;
      this.expand = true;
    },
    successFn(obj) {
      //判断是否拿到回调
      // this.loading = true;
      this.upError = false;
      this.progressIng(true)
      verifyStudentForImport(this.importList.classId, obj.imgUrl).then(response => {
        // this.loading = false;
        this.percentage = 100;
        this.progressIng(false)
        // this.$message({
        //   message: "恭喜你，上传成功！",
        //   type: "success"
        // });
      }).catch(Error =>{
        this.errorIng = Error;
        this.progressIng(false)
      })
    },
    getFileName(obj) {
      this.form.text = obj.name;
      this.delStart = true;
    },
    handleClose() {
      // this.$refs.ruleForm.resetFields();
      if(this.loading){
        this.$message('正在上传中......,请稍后刷新页面');
      }
      this.importList.dialogFormVisible = false;
    },
    close() {
      this.importList.dialogFormVisible = false;
      if(this.loading){
        this.$message('正在上传中......，请稍后刷新页面');
      }
    },
    delUrl() {
      this.form.text = "";
      this.delStart = false;
      this.expand = false;
      clearInterval(this.timout);
      this.percentage = 0;
    },
    btnUp(val) {
      //触发上传事件
      if (!this.form.text) {
        this.$message({
          message: "请先上传文件",
          type: "warning"
        });
      } else {
        this.loading = true;
        this.delStart = false;
        this.upError = false;
        importStudent(this.importList.classId).then(res =>{
          this.loading = false;
          this.importList.dialogFormVisible = false;
          let newObj = {};
          for (let x in res.data.content) {
            newObj[x] = res.data.content[x];
          }
          newObj.isTrue = true;
          this.$emit("importData", newObj);
          // this.$store.dispatch('UpdateCache');
          // this.$message({
          //   message: "上传成功，请稍后刷新页面！",
          //   type: "success"
          // });
        }).catch(Error =>{
          this.loading = false;
          this.upError = true;
          this.errorIng = Error;
        })
      }
    },
    progressIng(boolean){
      if(boolean){
        this.timout = setInterval(() =>{
          if(this.percentage <= (85 + Math.round(Math.random()*10)) ){
            this.percentage += Math.round(Math.random()*6)
          }else{
            clearInterval(this.timout);
          }
        },500)
      }else{
        clearInterval(this.timout)
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.title{
  color: #ff5e2c
}
code {
  padding: 0;
  margin-bottom: 0;
  margin-top: 20px;
  background: transparent;
}
.el-upload-text {
  font-size: 12px;
  color: rgb(165, 144, 131);
  margin-top: 7px;
}
.urlText {
  position: relative;
  height: 36px;
  width: 100%;
  display: block;
  border: 1px solid rgb(217, 200, 191);
  padding: 0 10px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  .text {
    width: 155px;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .expand {
    position: absolute;
    width: 100%;
    height: 1px;
    margin: 2px 0;
    background: #37a1fb;
    bottom: -3px;
    left: 0;
    transition: all 5s;
  }
}
.del {
  padding-left: 5px;
  font-style: normal;
  cursor: pointer;
  color: rgb(32, 160, 255);
  i {
    padding-left: 5px;
    font-size: 12px;
  }
}
</style>
